<template>
	<view class="page">
 
 
	 




		<view class="list">
			
			<view class="title">
				订购牛奶
			</view>	 
			
			<view class="notice_box" v-if="this.children_list.length ==0" >
				<u-alert :title="title" type = "warning" effect="dark" :description = "description" @click="addStudent" ></u-alert>
			</view>
			
			<view v-for="(item,index) in list" class="item" @click="gotoDetail(item)">
				<image :key="index" :src="item.icon" mode="aspectFill"></image>
				<view class="title">{{item.title}} </view>
				<view class="price">{{item.price}} <view class="amount">牛奶量:28</view> </view>
				<view class="content">{{ limitText(item.introduce, 30) }}</view>
			</view>
		</view>
	</view>

</template>

<script>
	import * as product_api from '@/api/product.js';
	import * as UserApi from '@/api/user.js';
	import dayjs from 'dayjs';
	export default {

		data() {
			return {
				src: 'https://youqu.arrow.enpingshi.com/uploadfiles/logo.jpg',
				list: [],
				dateList: [],
				currDate: 0,
				curNow: "全部",
				tagList: [{
					name: '全部'
				}],
				sdata: {
					page: 1,
					day: '',
					tag: '全部',
				},
				type: '',
				description:"点击此处，添加学生信息，用于下单。",
				children_list: [ ],
				children_number:0,
			}
		},
		// onReachBottom() {
		// 	this.sdata.page++
		// 	this.getList()
		// },
		onPullDownRefresh() {
			this.getList()
			 
		},
		onLoad(e) {
			this.type = e.type
			this.get_children_list()
 
		},
		onShow() {
				this.getList()
				this.get_children_list()
		},
		/*分享当前页面*/
		onShareAppMessage() {

		},

		onShareTimeline() {
			UserApi.share_index().then(res => {

			})
		},
		methods: {
			selectTab(name) {
				this.curNow = name;
				this.sdata.page = 1;
				this.list = [];
				this.getList()

			},

	 
    addStudent() {
      // 这里可以打开一个弹窗或跳转到新增页面
      console.log('新增学生');
	  uni.navigateTo({
	  	url:"/pages/user/student_add"
	  })
    },
			gotoDetail(item) {
				
				    console.log("i should go to detail",item.nid)
					uni.navigateTo({
						url: '/pages/activity/product_detail?id=' + item.nid
					})

			},
			getList() {
				 const that = this; // 在方法内部定义 that
				 
				product_api.list().then(res => {
					that.list = that.list.concat(res.info)
					console.log("res.info",res.info)
					console.log("that.list",that.list)
					uni.stopPullDownRefresh()
				})

			},
			// 获取其所属的学生
			get_children_list() {
				// 创建一个参数对象，包含 nid 参数
						    const params = {
						        member_nid: uni.getStorageSync('user_id')
						    };
							
				UserApi.children_list(params).then(res => {
					this.children_list = res.info
					console.log(this.children_list,"this.children_list")
					
					
					// 判断this.children_list是否存在且是一个数组
					    if (Array.isArray(this.children_list)) {
					        this.children_number = this.children_list.length;
					        console.log(this.children_number, "this.children_number");
					    } else {
					        // 如果this.children_list不是数组，设置为0或其他默认值
					        this.children_number = 0;
					        console.log("this.children_list is not an array or is empty", this.children_number);
					    }
	
			 
				})
			},

			selectDateBefore() {
				this.currDate = -1;
				this.list = [];
				this.getList();
			},
 
 
 /*限制显示的文字数量*/
 limitText(text, maxLength) {
       if (text.length > maxLength) {
         return text.slice(0, maxLength) + '...'; // 超出部分用省略号表示
       }
       return text;
     },
	 
	 

		}
	}
</script>

<style scoped lang="scss">
	
	@import url("asset/style.css");
 
	.list {
		padding-top: 20rpx;
		padding-bottom: 60rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #f8f8f8;

		.item {
			background-color: #FFFFFF;
			margin-bottom: 40rpx;
			box-shadow: 0 0 15rpx #C0C0C0;
			padding:25rpx;
			overflow: hidden;
			border-radius: 15rpx;

			image {
				width:220rpx;
				height: 220rpx;
				margin-right: 15rpx;
				background-color: #A0A0A0;
				border-radius: 15rpx;
			}

			.title {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
				margin: 0rpx 10rpx 20rpx 10rpx;
			}

			.price {
				color: #ff9900;
				font-size: 36rpx;
				font-weight: bold;
				margin: 20rpx 10rpx;
			}
			.amount{float:right;font-size: 28rpx;color: green;}
			
			.name {
				font-size: 30rpx;
				font-size: bold;
				width: 80rpx;
				text-align: right;
			}

			.content {
				font-size: 28rpx;
				line-height: 42rpx;
				color: #A0A0A0;
				margin-left:240rpx;
			}
		}

	}
</style>